<template>
  <el-row>
    <el-row :gutter="40">
      <el-col :span="14" >
        <calendar class="event-calendar"
                    :focusDate="calendarOpts.recentValidDate"
                    :format="calendarOpts.format"
                    :has-input="false"
                    :pane="1"
                    lang="zh-ch"
                    :switch-month="false"
                    :disabledDays="calendarOpts.disabledDays"
                    :on-day-click="onCalendarSelected"
                    ref="calendar">
             <div class="event" v-for="(meta, day) in calendar" :slot="day">
                <i v-if="meta.stock === 'ENOUGH'" class="el-icon-circle-check enough">￥{{meta.price}}</i> 
                <i v-if="meta.stock === 'SHORT'" class="el-icon-warning short">￥{{meta.price}}</i> 
                <i v-if="meta.stock === 'NONE'" class="el-icon-circle-close none">￥{{meta.price}}</i> 
            </div>
            <div slot="footer" class="footer"> 
              <i class="el-icon-circle-check enough"> 库存充足&nbsp;&nbsp;&nbsp;</i>
              <i class="el-icon-warning short"> 库存紧张&nbsp;&nbsp;&nbsp;</i>  
              <i class="el-icon-circle-close none"> 暂无库存&nbsp;&nbsp;&nbsp;</i>
            </div>
          </calendar>
      </el-col>
      <el-col :span="8">
        <div v-if="item.name" class="mgb20 h1">{{item.name}}</div>
        <el-form label-position="top"
                  label-width="80px"
                  :model="bookingForm"
                  class="booking-form">
          <input type="hidden" v-model="bookingForm.price" />
          <el-form-item label="选择日期">
            <el-tooltip class="item" effect="dark" content="请在日历表中选择合适的日期" placement="top-end">
              <el-input v-model="bookingForm.date" :readonly="true" placeholder="请选择日期"></el-input>
            </el-tooltip>
          </el-form-item>
           <el-form-item label="选择数量">
            <el-input-number v-model="bookingForm.amount"
                             :disabled="!bookingForm.date"
                              :min="1"
                              :max="10"></el-input-number>
          </el-form-item>
          <el-form-item label="选择时段">
            <el-select
              v-model="bookingForm.timeSlot"
              placeholder="选择可用时段"
              :disabled="!bookingForm.date"
              :loading="timeSlotOpts.loading"
              @click.native="loadTimeSlot()"
              loading-text="库存匹配中，请耐心等待..."
              no-data-text="当日暂无可用库存，请稍后再试">
              <el-option
                v-for="option in timeSlotOpts.options"
                :key="option.code"
                :label="option.label"
                :value="option"
                :disabled="option.status === 'SHORT'">
                <span style="float: left">{{ option.label }}</span>
                <span v-if="option.status === 'ENOUGH'" style="float: right; color: #13CE66; font-size: 13px">
                  库存足够
                </span>
                <span v-if="option.status === 'SHORT'" style="float: right; color: #F7BA2A; font-size: 13px">
                  库存不足
                </span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                      style="width:100%;"
                      @click="bookNow()"
                      :disabled="!bookingForm.timeSlot">立即预订</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!--<div style="height:500px;">xxx</div>-->
  </el-row>
</template>

<script>
import Calendar from '@/components/Calendar'
import {Items} from '@/store/api'
import moment from 'moment'
import * as types from '@/store/mutation-types'

export default {
  components: {
    Calendar
  },
  created() {
    let self = this
    const itemId = this.$route.params.itemId

    // load item
    Items.getItem(itemId).then(data => {
      this.item = data
    })

    // load calendar
    Items.getUsjItemCalendar(itemId).then(calendar => {
      self.calendar = calendar
      self.calendarOpts.recentValidDate = moment(calendar.recentValidDate).toDate()
      self.calendarOpts.disabledDays = (date) => {
        let dateString = moment(date).format('YYYYMMDD')
        let disabled = !(dateString in self.calendar && self.calendar[dateString].stock !== 'NONE')
        return disabled
      }
      self.$nextTick(() => {
        // refresh calendar panel
        self.$refs.calendar.getDateRange()
      })
    })
  },
  data() {
    return {
      item: {},
      calendar: {},
      calendarOpts: {
        disabledDays: () => { },
        format: 'yyyyMMdd',
        recentValidDate: new Date()
      },
      timeSlotOpts: {
        loading: false,
        options: []
      },
      bookingForm: {
        amount: 1,
        timeSlot: null,
        date: null,
        price: null
      }
    }
  },
  watch: {
    'bookingForm.date': function (newValue) {
      this.bookingForm.timeSlot = null
      this.timeSlotOpts.options = []
    },
    'bookingForm.amount': function (newValue) {
      this.bookingForm.timeSlot = null
      this.timeSlotOpts.options = []
    }
  },
  methods: {
    onCalendarSelected(date, inputValue) {
      const formatted = moment(date).format('YYYY-MM-DD')
      this.bookingForm.date = formatted
      this.bookingForm.price = this.calendar[inputValue].price
    },
    loadTimeSlot() {
      this.bookingForm.itemId = this.item.id
      if (this.bookingForm.date && this.bookingForm.amount &&
        this.timeSlotOpts.options.length === 0) {
        this.timeSlotOpts.loading = true
        Items.getUsjItemTimeSlot(this.bookingForm).then(data => {
          this.timeSlotOpts.options = data
          this.timeSlotOpts.loading = false
        })
      }
    },
    bookNow() {
      const self = this
      let bookItem = Object.assign({}, this.bookingForm, {item: this.item})
      this.$store.dispatch(types.ORDER_CONFIRM, bookItem)
        .then(() => {
          self.$router.push('/order/usj/confirm')
        })
    }
  }
}
</script>

<style lang="scss">
@import "./static/css/event-calendar.scss";

.booking-form {
  .el-select,
  .el-input {
    width: 100%;
  }
}
</style>
